<template>
  <div id="basic-layout">
    <a-layout style="min-height: 100vh">
      <!-- 修改为100vh确保占满视口 -->
      <a-layout-header class="header">
        <GlocalHeader />
      </a-layout-header>
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      <!-- 替换原有底部为Home页风格的黑色底部 -->
      <a-layout-footer class="new-footer">
        <div class="footer-content">
          © 2025 zjmOJ判题平台 - 专注编程能力提升
        </div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
#basic-layout .header {
  background: white;
  margin-bottom: 16px;
}

#basic-layout .content {
  background: linear-gradient(to right, white, white);
  flex: 1; /* 确保内容区域占满中间空间 */
}

/* 新底部样式（与Home页底部一致） */
#basic-layout .new-footer {
  background-color: #333; /* 黑色背景 */
  color: white; /* 白色文字 */
  padding: 1rem 0; /* 适中的内边距（比原有底部略高但保持紧凑） */
  margin-top: auto; /* 推到页面最下方 */
  font-size: 0.9rem; /* 匹配文字大小 */
  border-top: none; /* 移除可能的边框 */
}

.footer-content {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center; /* 文字居中 */
  padding: 0 1rem;
}

/* 删除原有底部样式 */
/* 以下为被替换的旧样式，已移除
#basic-layout .footer {
  background: #f0f0f0;
  color: #000;
  padding: 5px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
*/
</style>

<script setup lang="ts">
import GlocalHeader from "@/components/GlocalHeader.vue";
</script>
